import "./index.less";
import CONFIG from "./../../libs/config";
import Lang from "./../../libs/i18";
import {Link} from "react-router";
let Item = React.createClass({

    propTypes: {
        onClick: React.PropTypes.func,
        items: React.PropTypes.array,
        label: React.PropTypes.string,
        icon: React.PropTypes.string,
    },
    getInitialState: function () {
        return {
            active: ''
        };
    },
    parseLevel(){

    },
    _clickHandler(){
        if (this.props.items) {
            this.setState({active: this.state.active ? '' : 'active'})
        }
    },

    render(){
        if (this.props.items) {
            var props = this.props, _active = ((props.active.current.split('-')[0] == props.index) ||
            (props.active.next.split('-')[0] == props.index)) ? 'active' : '';
            var subs = props.items.map(function (item, index) {
                let active_ = '';
                if (props.active.current.split('-')[0] == props.index && index == props.active.current.split('-')[1]) {
                    active_ = 'active';
                }
                return (
                    <Link
                        key={index}
                        onClick={(e)=> {
                            e.stopPropagation();
                            return props._onClick({
                                current: props.index + '-' + index,
                                next: ''
                            });

                        }}
                        to={item.url }
                        className={'item ' + active_}>
                        <span> {item.label}</span>
                    </Link>
                );
            });
            return (
                <div
                    className={"menu-item dir " + ((
                    (props.active.current.split('-')[0] == props.index) ||
                    (props.active.next.split('-')[0] == props.index)) ? 'active' : '')}
                    onClick={()=> {
                        if (_active) {
                            this.props._onClick({
                                next: this.props.index + '-0'
                            })
                        } else {
                            this.props._onClick({
                                next: this.props.index + '-0'
                            });
                            this._clickHandler(props.index)
                        }
                    }}
                    style={{height: (_active) ? 'auto' : '40px'}}>
                    <a href="javascript:void(0)"
                       className={'item ' + (_active)}>
                        <i className={'fa fa-' + this.props.icon}></i>
                        <span> {this.props.label}</span>
                    </a>
                    <div className="subs">
                        {subs}
                    </div>
                    <div className="float-menu"
                         style={{display: 'none', top: '0'}}>
                        <a href="javascript:void(0)"
                           className={'item ' + (_active)}>
                            <i className={'fa fa-' + this.props.icon}></i>
                            <span> {this.props.label}</span>
                            <i className="fr fa fa-plus"></i>
                        </a>
                        <div className="subs">
                            {subs}
                        </div>
                    </div>
                </div>
            );
        } else {
            return (
                <div className="menu-item">
                    <Link to={this.props.url}
                          onClick={()=> {
                              this.props._onClick({
                                  current: this.props.index + '-0',
                                  next: ''
                              });
                          }}
                          className={'item ' + (this.props.active.current.split('-')[0] == this.props.index ? 'active' : '')}>
                        <i className={'fa fa-' + this.props.icon}></i>
                        <span> {this.props.label}</span>
                    </Link>
                    <div className="float-menu"
                         style={{display: 'none', top: '0'}}>
                        <Link to={this.props.url}
                              onClick={()=> {
                                  this.props._onClick({
                                      current: this.props.index + '-0',
                                      next: ''
                                  });
                              }}
                              className={'item ' + (this.props.active.current.split('-')[0] == this.props.index ? 'active' : '')}>
                            <i className={'fa fa-' + this.props.icon}></i>
                            <span> {this.props.label}</span>
                        </Link>
                    </div>
                </div>
            );
        }
    }
});

export default class Nav extends React.PureComponent {
    constructor(props) {
        super(props);
        const Menus = [
            {
                label: Lang.menus.HOME,
                url: CONFIG.MENUS_ABSOLUTE.HOME,
                icon: 'home',
            },
            {
                label: Lang.menus.NEWS,
                icon: 'newspaper-o',
                items: [
                    {
                        label: Lang.menus.NEWS_LIST,
                        url: CONFIG.MENUS_ABSOLUTE.NEWS,
                    },
                    {
                        label: Lang.menus.NEWS_CATEGORY,
                        url: CONFIG.MENUS_ABSOLUTE.NEWS_CATEGORY,
                    }
                ]
            },
            {
                label: Lang.menus.ACTIVITIES,
                icon: 'hdd-o',
                items: [
                    {
                        label: Lang.menus.ACTIVITIES_LIST,
                        url: CONFIG.MENUS_ABSOLUTE.ACTIVITIES
                    },
                    {
                        label: Lang.menus.ACTIVITIES_CATEGORY,
                        url: CONFIG.MENUS_ABSOLUTE.ACTIVITIES_CATEGORY
                    }
                ]
            },
            {
                label: Lang.menus.NOTICE,
                icon: 'volume-up',
                items: [
                    {
                        label: Lang.menus.NOTICE_LIST,
                        url: CONFIG.MENUS_ABSOLUTE.NOTICES
                    },
                    {
                        label: Lang.menus.NOTICE_CATEGORY,
                        url: CONFIG.MENUS_ABSOLUTE.NOTICES_CATEGORY
                    }
                ]
            },
            {
                isNormal: true,
                label: Lang.menus.CLASS_INFO,
                icon: 'graduation-cap',
                items: [
                    {
                        label: Lang.menus.CLASS_INFO_PROFILE,
                        url: CONFIG.MENUS_ABSOLUTE.CLASS_PROFILE
                    },
                    {
                        label: Lang.menus.CLASS_INFO_HONOUR,
                        url: CONFIG.MENUS_ABSOLUTE.CLASS_HONOUR
                    },
                    {
                        label: Lang.menus.CLASS_INFO_PHOTO,
                        url: CONFIG.MENUS_ABSOLUTE.CLASS_PHOTOS
                    },
                    {
                        label: Lang.menus.CLASS_INFO_TEACHER,
                        url: CONFIG.MENUS_ABSOLUTE.CLASS_TEACHERS
                    },
                    {
                        label: Lang.menus.CLASS_INFO_STUDENT,
                        url: CONFIG.MENUS_ABSOLUTE.CLASS_STUDENTS
                    },
                ]
            },
            {
                label: Lang.menus.HOMEWORK,
                url: CONFIG.MENUS_ABSOLUTE.HOMEWORK,
                icon: 'wpforms',
            },
            {
                label: Lang.menus.TEACH_SCHEDULE,
                url: CONFIG.MENUS_ABSOLUTE.TEACH_SCHEDULE,
                icon: 'calendar',
            },
            {
                isNormal: true,
                label: Lang.menus.DAY_NEWS,
                url: CONFIG.MENUS_ABSOLUTE.DAY_NEWS,
                icon: 'star',
            },
            {
                isNormal: true,
                label: Lang.menus.SCHEDULE,
                url: CONFIG.MENUS_ABSOLUTE.SCHEDULE,
                icon: 'file-text',
            },
            {
                isNormal: true,
                label: Lang.menus.DUTY,
                url: CONFIG.MENUS_ABSOLUTE.DUTY,
                icon: 'clipboard',
            }
        ];

        var current = window.location.pathname.slice(1), current_ = '';
        Menus.forEach((item, index)=> {
            if (item.items) {
                item.items.forEach((item1, idx) => {
                    if (item1.url.slice(1) == current) {
                        current = item1.label;
                        current_ = index + '-' + idx;
                    }
                })
            } else {
                if (item.url == current) {
                    current = item.label;
                    current_ = index + '-0';
                }
            }
        });
        this.state = {
            Menus: Menus,
            //当前页面选中菜单： 0-0 结构，前一个数字表示一级菜单中索引号，
            // 后一个数字表示二级菜单索引号
            current: current_ || '0-0',
            //将要选中菜单：默认没有选中，选中后表示前一个数字表示即将选中的一级菜单索引号，
            // 后一个数字表示选中二级菜单索引号
            next: '',
        };
        this._handlerClick = this._handlerClick.bind(this);
    }

    _handlerClick(obj) {
        if (obj) {
            this.setState(obj);
        }
    }

    selected(Menus) {
        if (this.state.current != '0-0') {
            return this.state.current;
        }
        var current = window.location.pathname.slice(1), current_ = '';
        Menus.forEach((item, index)=> {
            if (item.items) {
                item.items.forEach((item1, idx) => {
                    if (current.substr(0, item1.url.slice(1).length).indexOf(item1.url.slice(1)) > -1) {
                        current_ = index + '-' + idx;
                    }
                })
            } else {
                if (current.substr(0, item.url.slice(1).length).indexOf(item.url.slice(1)) > -1) {
                    current_ = index + '-0';
                }
            }
        });
        return current_;
    }

    render() {
        let Menus = this.state.Menus, {user} = this.props;
        let menus_ = [];
        Menus.forEach((item, index)=> {
            if (!user.isheadteacher) { //非班主任
                if (!item.isNormal) {
                    menus_.push(item);
                }
            } else {
                menus_.push(item);
            }
        });
        Menus = menus_;
        const active_ = {current: (this.selected(Menus)), next: this.state.next}, self = this;
        return <div
            className="menu_left"
            style={{height: window.innerHeight}}
        >
            <div className="brand">
                <span style={{
                    lineHeight: 1,
                    display: 'inherit',
                    paddingTop: '11px'
                }}>{Lang.brand}</span>
                <img src={require('./../../imgs/logo_icon.png')}
                     alt=""
                     style={{position: 'relative', top: '2px', left: '-5px'}}/>
            </div>
            {
                Menus.map(function (item, index) {
                    item.active = active_;
                    item.index = index;
                    return <Item _onClick={self._handlerClick}
                                 key={index}
                                 {...item} />
                })
            }
        </div>
    }
}
Nav.propTypes = {
    selected: React.PropTypes.string,
};